<template>
    <d2-container>
        <div class="layout-container">
            <div v-for="(item,index) in mainData" :key="index" :class="index">
                <draggable v-bind="dragOptions" :list="item" class="list-group" @end="onEnd" @start="onStart">
                    <transition-group name="list">
                        <div class="list-group-item" v-for="(element, i) in item" :key="element.name + i">
                            <!-- <div v-if="isAuth('autocomponents:portal:usershortcut')"> -->
                                <component :is="element.name" />
                            <!-- </div> -->
                        </div>
                    </transition-group>
                </draggable>
            </div>
        </div>
    </d2-container>
</template>
<script>
    // 参考地址：https://blog.csdn.net/weixin_33725515/article/details/91372166
    import eLink from "./link/index";
    import eMsg from './msg/index';
    import contentItem from './content-item'

    import draggable from 'vuedraggable'

    export default {
        name: "index",
        data() {
            return {
                componentList: [{
                    key: "1",
                    name: 'eLink',
                    title: '快捷导航'
                }, {
                    key: "2",
                    name: 'eMsg',
                    title: '消息列表'
                }, {
                    key: "3",
                    name: 'contentItem',
                    title: '待定1'
                }, {
                    key: "4",
                    name: 'contentItem',
                    title: '待定2'
                }, {
                    key: "5",
                    name: 'contentItem',
                    title: '待定3'
                }],
                dragging: false,
                layout: {
                    left: ["1", "2"],
                    right: ["3", "4", "5"]
                },
                mainData: {}
            }
        },
        computed: {
            dragOptions() {
                return {
                    animation: 30,
                    handle: ".drag-handle",
                    group: "description",
                    ghostClass: "ghost",
                    chosenClass: "sortable",
                    forceFallback: true
                };
            }
        },
        components: {
            eLink,
            eMsg,
            contentItem,
            draggable
        },
        mounted() {
            this.getLayout();
        },
        methods: {
            onStart() {
                this.dragging = true;
            },
            onEnd() {
                this.dragging = false;
                this.setLayout();
            },
            getLayout() {
                let myLayout = JSON.parse(window.localStorage.getItem("PORTAL_LAYOUT"));
                if (!myLayout || Object.keys(myLayout).length === 0)
                    myLayout = this.layout;
                const newLayout = {};
                for (const side in myLayout) {
                    if (myLayout[side] != 'null' && myLayout[side] != null && myLayout != 'undefined') {
                        newLayout[side] = myLayout[side].map(i => {
                            return this.componentList.find(c => c.key === i);
                        });
                    } else {}
                }
                this.mainData = newLayout;
            },
            setLayout() {
                const res = {};
                const flag = false;
                for (const side in this.mainData) {
                    const item = this.mainData[side].map(i => i.id);
                    if (item != 'null' && item != null) {
                        res[side] = item;
                    } else {
                        flag = true;
                    }
                }
                if (flag) {
                    window.localStorage.setItem("PORTAL_LAYOUT", JSON.stringify(res));
                }
            }

        }
    }
</script>
<style lang="scss">
    .layout-container {
        height: 100%;
        display: flex;

        .left {
            flex: 1;
            margin-right: 20px;
        }

        .right {
            width: 550px;
        }


        .list-group {
            >span {
                display: block;
                min-height: 20px;
            }
        }

        .list-group-item {
            margin-bottom: 20px;
            border-radius: 6px;
            overflow: hidden;
            background: #fff;
        }

        .component-box {
            // padding: 20px;
        }

        .drag-handle {
            cursor: move;
        }
    }

    .drag {
        .component-box {
            display: none;
        }
    }

    .list-enter-active {
        transition: all .3s linear;

    }

    .list-enter,
    .list-leave-to {
        opacity: .5;
    }

    .sortable {
        .component-box {
            display: none;
            height: 0;
        }
    }

    .ghost {
        .drag-handle {
            background: rgba(5, 113, 255, 0.1);
            border: 2px dotted rgb(57, 59, 187);
        }
    }
</style>